<template>
  <div style="padding-right: 10px;" class="big_screen">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>今日单量</span>
            <div style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn('Order')"> 详情</div>
          </div>
          <div style="text-align: left; width: 100%; padding-left: 0px; font-size: 36px; color: grey;">
            {{ index_info.today_info.count }}
          </div>
          <div style="margin-top: 35px;"></div>
          <el-row :gutter="20" style="color: gray;">
            <el-col :span="12" style="text-align: left;">GMV</el-col>
            <el-col :span="12" style="text-align: right; color: darkgoldenrod;">
              <span>{{ index_info.today_info.subtotal }}</span>
              <i class="el-icon-coin" style="margin-left: 5px;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

       <el-col :span="6">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>昨日单量</span>
            <div style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn('Order')"> 详情</div>
          </div>
          <div style="text-align: left; width: 100%; padding-left: 0px; font-size: 36px; color: grey;">
            {{ index_info.yesterday_info.count }}
          </div>
          <div style="margin-top: 35px;"></div>
          <el-row :gutter="20" style="color: gray;">
            <el-col :span="12" style="text-align: left;">GMV</el-col>
            <el-col :span="12" style="text-align: right; color: darkgoldenrod;">
              <span>{{ index_info.yesterday_info.subtotal }}</span>
              <i class="el-icon-coin" style="margin-left: 5px;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>



       <el-col :span="6">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>今日销售sku</span>
            <div style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn('Order')"> 详情</div>
          </div>
          <div style="text-align: left; width: 100%; padding-left: 0px; font-size: 36px; color: grey;">
            {{ index_info.today_sku_info.type_count }}
          </div>
          <div style="margin-top: 35px;"></div>
          <el-row :gutter="20" style="color: gray;">
            <el-col :span="12" style="text-align: left;">GMV</el-col>
            <el-col :span="12" style="text-align: right; color: darkgoldenrod;">
              <span>{{ index_info.today_sku_info.sku_count }}</span>
              <i class="el-icon-coin" style="margin-left: 5px;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>


       <el-col :span="6">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>昨日销售sku</span>
            <div style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn('Order')"> 详情</div>
          </div>
          <div style="text-align: left; width: 100%; padding-left: 0px; font-size: 36px; color: grey;">
            {{ index_info.yeserday_sku_info.type_count }}
          </div>
          <div style="margin-top: 35px;"></div>
          <el-row :gutter="20" style="color: gray;">
            <el-col :span="12" style="text-align: left;">GMV</el-col>
            <el-col :span="12" style="text-align: right; color: darkgoldenrod;">
              <span>{{ index_info.yeserday_sku_info.sku_count }}</span>
              <i class="el-icon-coin" style="margin-left: 5px;"></i>
            </el-col>
          </el-row>
        </el-card>
    </el-col>
    </el-row>


           

   
    

    <div style="margin-top: 20px;"></div>

    <!-- <el-row :gutter="20">
      <el-col :span="6" v-for="n in 4" :key="n">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>昨日销售sku</span>
            <div style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn"> 详情</div>
          </div>
          <div style="text-align: left; width: 100%; padding-left: 0px; font-size: 36px; color: grey;">
            99,123 {{ index_info.yeserday_sku_info.type_count }}
          </div>
          <div style="margin-top: 35px;"></div>
          <el-row :gutter="20" style="color: gray;">
            <el-col :span="12" style="text-align: left;">GMV</el-col>
            <el-col :span="12" style="text-align: right; color: darkgoldenrod;">
              <span>{{ index_info.yeserday_sku_info.sku_count }}</span>
              <i class="el-icon-coin" style="margin-left: 5px;"></i>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row> -->

    <div style="margin-top: 20px;"></div>

    


    <!-- <el-row :gutter="20">
    <el-card shadow="always" style="width: 100%;">
      <el-row :gutter="20">
        <el-col
         v-for="(tag, tagKey) in tagMap"
            :key="tagKey"
            :span="4"
        >
          <el-badge :value="12" :max="99" class="item">
            <el-button size="small">{{tag.label}}</el-button>
          </el-badge>
        </el-col>
      </el-row>
    </el-card>
</el-row> -->


    <div style="margin-top: 20px;"></div>

    <el-card shadow="always" style="width: 100%;">
      <!-- 标题 -->
      <div class="chart-title">
        最近{{ days }}天订单量与销售额（GMV）
      </div>

      <!-- 自定义图例 + 控件 -->
      <div class="custom-legend">
        <span class="legend-item" style="color:#5470C6">⬤ 订单量</span>
        <span class="legend-item" style="color:#91CC75">⬤ 销售额</span>

        <div class="chart-type">
          <label>
            <input type="radio" value="line" v-model="chartType" />
            折线图
          </label>
          <label>
            <input type="radio" value="bar" v-model="chartType" />
            柱状图
          </label>
        </div>

        <div class="date-filter">
          <button :class="{ active: days === 7 }" @click="setDays(7)">最近7天</button>
          <button :class="{ active: days === 15 }" @click="setDays(15)">最近15天</button>
          <button :class="{ active: days === 30 }" @click="setDays(30)">最近30天</button>
        </div>
      </div>

      <!-- ECharts 图表 -->
      <ECharts :options="chartOptions" autoresize style="width: 95%; height: 540px;"></ECharts>
    </el-card>

    <div style="margin-top: 20px;"></div>

    <el-card shadow="always" style="width: 100%;">
    <el-row :gutter="20" style="margin-bottom: 10px; display: flex;" justify="center">

      <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.info};`">未售出统计</strong>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="10-30天未售出">
              {{index_info.unsell_info.unsell_10_30}}
              <span @click="clickFn('Product_new', {'select':7, value1:10, value2:30})" style="position: absolute;right: 0px; float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item label="30-60天未售出">
              {{index_info.unsell_info.unsell_30_60}}
               <span @click="clickFn('Product_new', {'select':7, value1:30, value2:60})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="60-90天未售出" >
              {{index_info.unsell_info.unsell_60_90}}
               <span @click="clickFn('Product_new', {'select':7, value1:60, value2:90})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="90天以上未售出">
              {{index_info.unsell_info.count_90}}
               <span @click="clickFn('Product_new', {'select':7, value1:90})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>

    <el-col>
      <!-- 高库龄-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.warning};`">高库龄</strong>
            <span style="font-size: 12px;color:darkgrey;margin-left: 10px;">  (180 天以上{{index_info.inventory_age.count_180}})</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="60-90 库龄">
              {{index_info.inventory_age.count_60_90}}
               <span @click="clickFn('ProductInventoryAge', {'select':1, 'value1':60,'value2': 90})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item label="90-120 库龄">
              {{index_info.inventory_age.count_90_120}}
               <span @click="clickFn('ProductInventoryAge', {'select':1, 'value1':90,'value2': 120})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="120-150 库龄">
              {{index_info.inventory_age.count_120_150}}
               <span @click="clickFn('ProductInventoryAge',  {'select':1, 'value1':120,'value2': 150})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="150-180天库龄">
              {{index_info.inventory_age.count_150_180}}
               <span @click="clickFn('ProductInventoryAge', {'select':1, 'value1':150, 'value2':180})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
              <!-- <el-descriptions-item  label="180 天以上库龄">
              {{index_info.inventory_age.count_180}}
               <span @click="clickFn('ProductInventoryAge', {'warehouse_age:':[180, '']})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item> -->
          </el-descriptions>
        </el-card>
    </el-col>

    <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.danger};`">低利润</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;"></span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="10-20 天未售出">
              {{index_info.unsell_info.unsell_10_20}}
            </el-descriptions-item>
            <el-descriptions-item label="20-30 天未售出">
              {{index_info.unsell_info.unsell_20_30}}
            </el-descriptions-item>
            <el-descriptions-item  label="30-40 天未售出">
              {{index_info.unsell_info.unsell_30_40}}
            </el-descriptions-item>
            <el-descriptions-item  label="40 天以上未售出">
              {{index_info.unsell_info.count_40}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>


    <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.warning};`">退货高</strong>
            <!-- <span style="float: right; color: #4285f4; cursor: pointer;"class="details">详情</span> -->
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="5% 以下退货率">
              {{index_info.return_rate_stat.rate_0_5}}
               <span @click="clickFn('Product_new', {'select':8, 'value1':0, 'value2':5})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item label="5%-10% 退货率">
              {{index_info.return_rate_stat.rate_5_10}}
              <span @click="clickFn('Product_new', {'select':8, 'value1':5, 'value2':10})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="10%-20% 退货率">
              {{index_info.return_rate_stat.rate_10_20}}
              <span @click="clickFn('Product_new', {'select':8, 'value1':10, 'value2':20})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="20% 以上 退货率">
              {{index_info.return_rate_stat.rate_20_plus}}
              <span @click="clickFn('Product_new', {'select':8, 'value1':20})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>
    

    <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.success};`">到货提醒</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;"></span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="5 天内到货">
              {{index_info.arrive_info.arrive_0_5}}
              <span @click="clickFn('ReceivingOrderDetails', {'select':1, 'value1':formatDateWithOffset(0), 'value2':formatDateWithOffset(5)})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item label="5-10 到货">
              {{index_info.arrive_info.arrive_5_10}}
              <span @click="clickFn('ReceivingOrderDetails', {'select':1,'value1':formatDateWithOffset(5), 'value2':formatDateWithOffset(10)})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="10-20 到货">
              {{index_info.arrive_info.arrive_10_20}}
              <span @click="clickFn('ReceivingOrderDetails', {'select':1,'value1':formatDateWithOffset(10), 'value2':formatDateWithOffset(20)})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="20 天以上到货">
              {{index_info.arrive_info.arrive_20}}
              <span @click="clickFn('ReceivingOrderDetails', {'select':1,'value1':formatDateWithOffset(20)})" style="float: right; margin-left: 10px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>
    </el-row>
<el-row :gutter="20" style="margin-bottom: 10px; display: flex;" justify="center">
    <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.warning};`">未上架</strong>
            <!-- <span style="float: right; color: #4285f4; cursor: pointer;"class="details">详情</span> -->
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="10-20 天未售出">
              {{index_info.unsell_info.unsell_10_20}}
            </el-descriptions-item>
            <el-descriptions-item label="20-30 天未售出">
              {{index_info.unsell_info.unsell_20_30}}
            </el-descriptions-item>
            <el-descriptions-item  label="30-40 天未售出">
              {{index_info.unsell_info.unsell_30_40}}
            </el-descriptions-item>
            <el-descriptions-item  label="40 天以上未售出">
              {{index_info.unsell_info.count_40}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>

    <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.info};`">上架数量少</strong>
            <!-- <span style="float: right; color: #4285f4; cursor: pointer;"class="details">详情</span> -->
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="10-20 天未售出">
              {{index_info.unsell_info.unsell_10_20}}
            </el-descriptions-item>
            <el-descriptions-item label="20-30 天未售出">
              {{index_info.unsell_info.unsell_20_30}}
            </el-descriptions-item>
            <el-descriptions-item  label="30-40 天未售出">
              {{index_info.unsell_info.unsell_30_40}}
            </el-descriptions-item>
            <el-descriptions-item  label="40 天以上未售出">
              {{index_info.unsell_info.count_40}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>

    <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.warning};`">断货预警</strong>
            <!-- <span style="float: right; color: #4285f4; cursor: pointer;"class="details">详情</span> -->
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="可售小于10天">
              {{index_info.can_sell_day_warning.day_0_10}}
              <span @click="clickFn('Product_new', {'select':1, 'value1':0, 'value2':10, 'strategy':'old'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item label="可售 10-20 天">
              {{index_info.can_sell_day_warning.day_10_20}}
              <span @click="clickFn('Product_new', {'select':1, 'value1':10, 'value2':20, 'strategy':'old'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="可售 20-30天">
              {{index_info.can_sell_day_warning.day_20_30}}
              <span @click="clickFn('Product_new', {'select':1, 'value1':20, 'value2':30, 'strategy':'old'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="可售 30-50 天">
              {{index_info.can_sell_day_warning.day_30_50}}
              <span @click="clickFn('Product_new', {'select':1, 'value1':30, 'value2':50, 'strategy':'old'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>

    <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.danger};`">已经断货({{index_info.out_of_stock.count}})</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;" @click="clickFn('Product_new', {'select':9,'value1':0, 'value2':1,'strategy':'old'})"class="details">详情</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  :label="index_info.out_of_stock.skus[0]?'sku':'暂无数据'">
              {{index_info.out_of_stock.skus[0]?.product_sku}}
            </el-descriptions-item>
            <el-descriptions-item  label="sku">
               {{index_info.out_of_stock.skus[1]?.product_sku}}
            </el-descriptions-item>
            <el-descriptions-item   label="sku">
               {{index_info.out_of_stock.skus[2]?.product_sku}}
            </el-descriptions-item>
            <el-descriptions-item  label="sku">
               {{index_info.out_of_stock.skus[3]?.product_sku}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>

      <el-col>
      <!-- 30天未售出  后面封装成label-key 的形式来自后端-->
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="`color: ${tagColorMap.info};`">波动趋势(sku数量)</strong>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item  label="持续上升">
              {{index_info.can_sell_day_warning.up_continue}}

              <span @click="clickFn('Product_new', {'strategy':'up_continue'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item label="持续下降">
               {{index_info.can_sell_day_warning.down_continue}}
               <span @click="clickFn('Product_new', {'strategy':'down_continue'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="波动上升">
               {{index_info.can_sell_day_warning.up_variation}}
               <span @click="clickFn('Product_new', {'strategy':'up_variation'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
            <el-descriptions-item  label="波动下降">
               {{index_info.can_sell_day_warning.down_variation}}
               <span @click="clickFn('Product_new',  {'strategy':'down_variation'})" style="float: right; margin-left: 20px;  color: #4285f4; cursor: pointer;"class="details">详情</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col>
  </el-row>
    <!-- <el-col
      v-for="([key, tag], index) in Object.entries(tagMap)"
      v-if="index < 5"
      :key="key"

    >
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="{ color: tagColorMap[tag.type] }">{{ tag.label }}</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;"class="details">详情</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item v-for="item in tag.info" :key="item.key" :label="item.label">
              {{ item.value }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
    </el-col> -->


  


    <!-- 第二行 4个，span=6 -->
    <!-- <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col
        v-for="([key, tag], index) in Object.entries(tagMap)"
        v-if="index >= 5 && index < 9"
        :key="key"
        :span="6"
      >
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="{ color: tagColorMap[tag.type] }">{{ tag.label }}</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;"class="details">详情</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item v-for="item in tag.info" :key="item.key" :label="item.label">
              {{ item.value }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row> -->

    <!-- 第三行 4个，span=6 -->
    <!-- <el-row :gutter="20">
      <el-col
        v-for="([key, tag], index) in Object.entries(tagMap)"
        v-if="index >= 9"
        :key="key"
        :span="6"
      >
        <el-card shadow="hover" style="margin-bottom: 10px;">
          <div style="margin-bottom: 10px;">
            <strong :style="{ color: tagColorMap[tag.type] }">{{ tag.label }}</strong>
            <span style="float: right; color: #4285f4; cursor: pointer;"class="details">详情</span>
          </div>
          <el-descriptions :column="1" size="small" style="background:transparent; padding: 10px; border-radius: 4px;">
            <el-descriptions-item v-for="item in tag.info" :key="item.key" :label="item.label">
              {{ item.value }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row> -->
    </el-card>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="6">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>七天用户销量</span>
          </div>
          <el-table :data="index_info.sales_summary_by_person" style="width: 100%" border>
            <el-table-column label="销售人" prop="name">
               <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.user_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="销售数量" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.total_day_7_sales }}</span>
                <i class="el-icon-pie-chart"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
       <el-col :span="8">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>七天sku排行销量</span>
          </div>
          <el-table :data="index_info.top_10_skus" style="width: 100%" border>
            <el-table-column label="sku" prop="name">
               <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.product_sku }}</span>
              </template>
            </el-table-column>
            <el-table-column label="销售数量" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.day_7 }}</span>
                <i class="el-icon-pie-chart"></i>
              </template>
            </el-table-column>

              <el-table-column label="销售人" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.user_name }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="10">
        <el-card shadow="always" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>退货率高sku</span>
          </div>
          <el-table :data="index_info.top_returns" style="width: 100%" border>
            <el-table-column label="sku" prop="name">
               <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.product_sku }}</span>
              </template>
            </el-table-column>
            <el-table-column label="退货率" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.return_rate }} % </span>
               
              </template>
            </el-table-column>
            <el-table-column label="90天销售" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.day_90 }}</span>
               
              </template>
            </el-table-column>
            <el-table-column label="90天退货" prop="name">
              <template slot-scope="scope">
                <span style="margin-right: 10px">{{ scope.row.day_90_r }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>


    </el-row>


  </div>
</template>

<script>
import ECharts from "vue-echarts";
import * as echarts from "echarts";
export default {
  components: { ECharts },
  props: {
    data: {
      type: Object,
      required: true,
      default: () => { }
    }
  },
  beforeMount(){
    this.$http('get', "/index/query").then(res => {

            // 如果要求刷新则根据当前页面查询条件进行页面数据的刷新
            let data  = res.data
            this.index_info = res.data
            this.updateChart()
        })
  },
  data() {
    return {
      index_info:{},
      items: [
        {
          id: 'A001',
          tags: ['30天以上未售出', '高库龄', '低利润']
        },
        {
          id: 'A002',
          tags: ['退货高', '未上架']
        },
        {
          id: 'A003',
          tags: ['持续上涨', '波段上涨']
        },
        // 可继续添加更多商品
      ],
        
      tagMap: {
        no_sell_30_day: {
          label: '30天以上未售出',
          key: 'no_sell_30_day',
          type: 'danger',
          info: [
            { label: '谷仓sku数量', value: 10, key: 'product_a1' },
            { label: '商品A2', value: 20, key: 'product_a2' },
            { label: '商品A3', value: 30, key: 'product_a3' },
            { label: '商品A4', value: 40, key: 'product_a4' }
          ]
        },
        high_stock_age: {
          label: '高库龄',
          key: 'high_stock_age',
          type: 'danger',
          info: [
            { label: '商品B1', value: 15, key: 'product_b1' },
            { label: '商品B2', value: 25, key: 'product_b2' },
            { label: '商品B3', value: 35, key: 'product_b3' },
            { label: '商品B4', value: 45, key: 'product_b4' }
          ]
        },
        low_profit: {
          label: '低利润',
          key: 'low_profit',
          type: 'warning',
          info: [
            { label: '商品C1', value: 5, key: 'product_c1' },
            { label: '商品C2', value: 8, key: 'product_c2' },
            { label: '商品C3', value: 12, key: 'product_c3' },
            { label: '商品C4', value: 9, key: 'product_c4' }
          ]
        },
        high_return: {
          label: '退货高',
          key: 'high_return',
          type: 'danger',
          info: [
            { label: '商品D1', value: 7, key: 'product_d1' },
            { label: '商品D2', value: 13, key: 'product_d2' },
            { label: '商品D3', value: 9, key: 'product_d3' },
            { label: '商品D4', value: 11, key: 'product_d4' }
          ]
        },
        arrival_notice: {
          label: '到货提醒',
          key: 'arrival_notice',
          type: 'info',
          info: [
            { label: '商品E1', value: 3, key: 'product_e1' },
            { label: '商品E2', value: 4, key: 'product_e2' },
            { label: '商品E3', value: 6, key: 'product_e3' },
            { label: '商品E4', value: 2, key: 'product_e4' }
          ]
        },
        not_listed: {
          label: '未上架',
          key: 'not_listed',
          type: 'info',
          info: [
            { label: '商品F1', value: 0, key: 'product_f1' },
            { label: '商品F2', value: 1, key: 'product_f2' },
            { label: '商品F3', value: 2, key: 'product_f3' },
            { label: '商品F4', value: 3, key: 'product_f4' }
          ]
        },
        low_stock: {
          label: '上架数量少',
          key: 'low_stock',
          type: 'warning',
          info: [
            { label: '商品G1', value: 1, key: 'product_g1' },
            { label: '商品G2', value: 3, key: 'product_g2' },
            { label: '商品G3', value: 2, key: 'product_g3' },
            { label: '商品G4', value: 4, key: 'product_g4' }
          ]
        },
        stock_warning: {
          label: '断货预警',
          key: 'stock_warning',
          type: 'warning',
          info: [
            { label: '商品H1', value: 2, key: 'product_h1' },
            { label: '商品H2', value: 1, key: 'product_h2' },
            { label: '商品H3', value: 0, key: 'product_h3' },
            { label: '商品H4', value: 5, key: 'product_h4' }
          ]
        },
        out_of_stock: {
          label: '已经断货',
          key: 'out_of_stock',
          type: 'danger',
          info: [
            { label: '商品I1', value: 0, key: 'product_i1' },
            { label: '商品I2', value: 0, key: 'product_i2' },
            { label: '商品I3', value: 0, key: 'product_i3' },
            { label: '商品I4', value: 0, key: 'product_i4' }
          ]
        },
        continuous_up: {
          label: '持续上涨',
          key: 'continuous_up',
          type: 'success',
          info: [
            { label: '商品J1', value: 99, key: 'product_j1' },
            { label: '商品J2', value: 101, key: 'product_j2' },
            { label: '商品J3', value: 120, key: 'product_j3' },
            { label: '商品J4', value: 135, key: 'product_j4' }
          ]
        },
        wave_up: {
          label: '波段上涨',
          key: 'wave_up',
          type: 'success',
          info: [
            { label: '商品K1', value: 88, key: 'product_k1' },
            { label: '商品K2', value: 92, key: 'product_k2' },
            { label: '商品K3', value: 95, key: 'product_k3' },
            { label: '商品K4', value: 100, key: 'product_k4' }
          ]
        },
        continuous_down: {
          label: '持续下降',
          key: 'continuous_down',
          type: 'danger',
          info: [
            { label: '商品L1', value: 70, key: 'product_l1' },
            { label: '商品L2', value: 65, key: 'product_l2' },
            { label: '商品L3', value: 60, key: 'product_l3' },
            { label: '商品L4', value: 55, key: 'product_l4' }
          ]
        },
        wave_down: {
          label: '波段下降',
          key: 'wave_down',
          type: 'warning',
          info: [
            { label: '商品M1', value: 60, key: 'product_m1' },
            { label: '商品M2', value: 63, key: 'product_m2' },
            { label: '商品M3', value: 59, key: 'product_m3' },
            { label: '商品M4', value: 61, key: 'product_m4' }
          ]
        }
      },

      tagColorMap: {
        danger: '#f56c6c',
        warning: '#e6a23c',
        info: '#909399',
        success: '#67c23a'
      },
      chartType: "line",
      days: 15,
      chartOptions: {},
    };
  },
  mounted() {
    this.updateChart();
  },
  watch: {
    chartType() {
      this.updateChart();
    },
    days() {
      this.updateChart();
    },
  },
  methods: {


      formatDateWithOffset(offsetDays = 0) {
      const now = new Date();
      
      // 设置为 offset 天后的日期
      now.setDate(now.getDate() + offsetDays);

      // 构造日期部分
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    },

    getTagType(tag) {
      // 可自定义更多颜色类型
      const tagMap = {
        '30天以上未售出': 'danger',
        '高库龄': 'danger',
        '低利润': 'warning',
        '退货高': 'danger',
        '到货提醒': 'info',
        '未上架': 'info',
        '上架数量少': 'warning',
        '断货预警': 'warning',
        '已经断货': 'danger',
        '持续上涨': 'success',
        '波段上涨': 'success',
        '持续下降': 'danger',
        '波段下降': 'warning'
      }
      return tagMap[tag] || 'info'
    },
    clickFn(tableName, query_data) {
      for (let index = 0; index < this.data.menu.length; index++) {
        const element = this.data.menu[index]
        let res = element.children.find(item=>item.tableName == tableName)
        if(res){
          this.$bus.$emit('index_query', {
              tableName:res,
              queryData: query_data
            })
          return true
        }
      }
       
      // 今日订单
      

      // // 未售出统计
      // this.$emit('slectMenu', 'Product_new', {})

      // // 高库龄
      // this.$emit('slectMenu', 'Product_new', {})
      // // 退货高
      //断货预警
      //已经断货(3462)
      //波动趋势(sku数量)


    },
    setDays(num) {
      this.days = num;
    },
    generateLastNDays(n) {
      const dates = [];
      const today = new Date();
      for (let i = n - 1; i >= 0; i--) {
        const d = new Date(today);
        d.setDate(today.getDate() - i);
        const mm = String(d.getMonth() + 1).padStart(2, "0");
        const dd = String(d.getDate()).padStart(2, "0");
        dates.push(`${d.getFullYear()}-${mm}-${dd}`);
      }
      return dates;
    },
    updateChart() {
      
      if (!this.index_info?.all) return;

      const allData = this.index_info.all;
      const sliced = allData.slice(-this.days);

      const dates = sliced.map(item => item.date);
      const orderData = sliced.map(item => item.count);
      const gvmData = sliced.map(item => item.subtotal);

      console.log("orderDataorderData==>", orderData);
      console.log("gvmDatagvmDatagvmData==>", gvmData);
      
      this.chartOptions = {
        title: {
          // 这里不展示，因为标题放到外面了，如果需要内部标题可以打开
          show: false,
          text: `最近${this.days}天订单量与销售额（GMV）`,
          subtext: "单位：订单 / 元",
          top: "20px",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        legend: {
          data: ["订单量", "销售额"],
          top: 25, // 下移，避免和外部自定义图例冲突
          left: "center",
          textStyle: {
            fontSize: 14,
          },
        },
        toolbox: {
          show: false,
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: {
          //     show: true,
          //     type: ["line", "bar"],
          //   },
          //   saveAsImage: { show: true },
          // },
        },
        grid: {
          top: "90px", // 留出legend区域空间
          left: "60px",
          right: "60px",
          bottom: "30px",
        },
        xAxis: {
          type: "category",
          data: dates,
        },
        yAxis: [
          {
            type: "value",
            name: "订单量",
            position: "left",
            axisLine: {
              lineStyle: { color: "#5470C6" },
            },
          },
          {
            type: "value",
            name: "销售额（元）",
            position: "right",
            axisLine: {
              lineStyle: { color: "#91CC75" },
            },
          },
        ],
        series: [
          {
            name: "订单量",
            type: this.chartType,
            yAxisIndex: 0,
            data: orderData,
            smooth: this.chartType === "line", // 平滑曲线
            itemStyle: { color: "#5470C6" },
          },
          {
            name: "销售额",
            type: this.chartType,
            yAxisIndex: 1,
            data: gvmData,
            smooth: this.chartType === "line", // 平滑曲线
            itemStyle: { color: "#91CC75" },
          },
        ],
      };

      console.log("chartOptionschartOptions==>", this.chartOptions);
    },
  },
};
</script>


<style>
.big_screen .el-descriptions-item {
  position: relative !important;
}

.big_screen .el-descriptions-item .details{
  position: absolute !important;
  right: 0% !important;

}

</style>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
  gap: 12px;
  font-family: Arial, sans-serif;
}

.chart-title {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 4px;
}

.chart-title small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #666;
}

.custom-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0px;
  margin-top: 25px;
  font-family: Arial, sans-serif;
  user-select: none;
}

.legend-item {
  font-weight: 500;
  font-size: 14px;
  user-select: none;
}

.chart-type label,
.date-filter button {
  margin-left: 12px;
  cursor: pointer;
}

input[type="radio"] {
  margin-right: 4px;
}

button {
  padding: 6px 14px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 20px;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button:hover {
  background-color: #f1f2f2;
}

button.active {
  background-color: #4285f4;
  color: white;
  border-color: #4285f4;
}

.demo-table-expand {
  font-size: 0;
  padding: 0px 10px 0px 20px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

.visible_hidden {
  visibility: hidden;
}
.visible_show {
  visibility: visible;
}
</style>
